<template>
        <!-- 人员管理下的管理员模块中的操作:详情组件 -->
        <el-dialog title="账号信息:" :visible.sync="isDialogFormVisible" width="35%">
                <el-form :model="form" label-width="120px">
                <div class="detail-user">
                        <el-image 
                                :src="form.photo_url" 
                                >
                        </el-image>
                </div>

                <el-form-item label="用户名">
                        <el-input v-model="form.username" :disabled="true" style="width: 85%;"></el-input>
                </el-form-item>
                <el-form-item label="性别">
                        <el-input v-model="form.sex" :disabled="true" style="width: 85%;"></el-input>
                </el-form-item>
                <el-form-item label="年龄">
                        <el-input v-model="form.age" :disabled="true" style="width: 85%;"></el-input>
                </el-form-item>
                <el-form-item label="地址" v-if="form.address">
                        <el-input v-model="form.address" :disabled="true" style="width: 85%;"></el-input>
                </el-form-item>
                <el-form-item label="手机号">
                        <el-input v-model="form.phone" :disabled="true" style="width: 85%;"></el-input>
                </el-form-item>
                <el-form-item label="近期登录">
                        <el-input v-model="form.last_login_time" :disabled="true" style="width: 85%;"></el-input>
                </el-form-item>
                <el-form-item label="近期修改时间" v-if="form.update_time">
                        <el-input v-model="form.update_time" :disabled="true" style="width: 85%;"></el-input>
                </el-form-item>
                <el-form-item label="创建时间" v-if="form.create_time">
                        <el-input v-model="form.create_time" :disabled="true" style="width: 85%;"></el-input>
                </el-form-item>
                <el-form-item label="身份">
                        <el-input v-model="form.status" :disabled="true" style="width: 85%;"></el-input>
                </el-form-item>

                </el-form>
                <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="isDialogFormVisible = false">关闭</el-button>
                </div>

        </el-dialog>
</template>

<script>
export default {
    name:'AdminDialogBox',
    props:['form'],
    data() {
        return {
            // 对话框的宽度
            formLabelWidth: '120px',
            isDialogFormVisible:false
        }
    },
    mounted(){
            // 绑定一个事件(触发对话框)
            this.$bus.$on('adminClickDialog',()=>{
                this.isDialogFormVisible = true;
            })
        },
        beforeDestroy(){
            // 解绑
            this.$bus.$off('adminClickDialog');
        }
}
</script>

<style lang="less" scoped>
.detail-user{
    display: flex;
    justify-content: space-between;
    align-items: center;

    .el-upload__tip,.el-upload-list--picture .el-upload-list__item {
        margin-top: 0px;
    }

    .el-image{
        width: 140px; 
        height: 140px;
        border-radius: 5px;
        margin-left: 15%;
        margin-bottom: 10px;
        margin-right: 5px;
    }

    .upload-demo{
        margin-right: 15%;
    }
}
</style>